<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		 display:flex;
		 justify-content:space-around;
		 
		 任何容器都可以指定为flex布局
		 当我们使用flex时，float、clear、vertical-align属性会失效
		 可以控制字元素的横向还是竖向
		 
		 （1）flex布局父项常见属性：
		 flex-direction：设置主轴方向（称为轴x）
		 justify-content：设置主轴上子元素排列方式
		 flex-wrap：设置子元素是否换行，默认不换行，如果装不开，会缩小子元素宽度
		 align-content：设置侧轴上子元素的排列方式（多行）（也称为y轴）
		 align-items：设置侧轴上子元素排列方式（单行）
		 flex-flow：复合了flex-direction和flex-wrap
		 
		 
		 （2）flex布局子项常见属性：
		 flex：表示占用的份数
		 align-self：控制子项之间在侧轴上排列方式
		 order：数字越小排列越靠前，默认为0
		 
		 背景引入图片：background：url("")
		 background-size:width auto;使得图片不会变模糊
		 
		 
		 -->
	</body>
</html>
